<template>
  <div>
    <el-button
      style="color:black;fontSize:15px"
      icon="el-icon-back"
      type="text"
      @click="$router.back()"
    >返回
    </el-button>
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">基本信息</el-menu-item>

        <el-menu-item @click="drivingFn">驾驶证信息</el-menu-item>
      </el-menu>
    </div>
    <div v-show="activeIndex === '1'">
      <el-form>
        <div class="detail">
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="marginText">
                <span class="span-title">车辆编号:</span><span v-if="!isVisible">{{ listForm.id }}</span>
                <el-input v-else v-model="listForm.id" style="width: 200px;" />
              </div>
            </el-col>
            <el-col :span="8">
              <span class="span-title">车牌号码:</span><span v-if="!isVisible">{{ listForm.licensePlate }}</span>
              <el-input v-else v-model="listForm.licensePlate" style="width: 200px;" />
            </el-col>
            <el-col :span="8">
              <span class="span-title">车辆类型:</span><span v-if="!isVisible">{{ listForm.truckTypeName }}</span>
              <el-input v-else v-model="listForm.truckTypeName" style="width: 200px;" />
            </el-col>
            <el-col :span="8">
              <span class="span-title">车辆体积:</span><span v-if="!isVisible">{{ listForm.allowableVolume }}m³</span>
              <el-input v-else v-model="listForm.allowableVolume" style="width: 200px;" />
            </el-col>
            <el-col :span="8">
              <span class="span-title">车辆载重:</span><span v-if="!isVisible">{{ listForm.allowableLoad }}吨</span>
              <el-input v-else v-model="listForm.allowableLoad" style="width: 200px;" />
            </el-col>
            <el-col :span="8">
              <span class="span-title">GPSID:</span><span v-if="!isVisible">{{ listForm.deviceGpsId }}</span>
              <el-input v-else v-model="listForm.deviceGpsId" style="width: 200px;" />
            </el-col>

          </el-row>

          <div class="img-title">
            <el-row :gutter="20">
              <el-col :span="4"><div>   <span class="span-title">图片信息</span></div></el-col>
              <el-col :span="16"><div>
                <span v-if="!isVisible" class="img">
                  <img style="width: 200px; height: 150px; margin-right: 20px;" src="https://img20.360buyimg.com/imgzone/jfs/t1/211198/26/12680/177425/61b6f0cbE006ea544/68379870de399b24.jpg" alt="">
                  <img style="width: 200px; height: 150px;" src="https://img20.360buyimg.com/imgzone/jfs/t1/211198/26/12680/177425/61b6f0cbE006ea544/68379870de399b24.jpg" alt="">
                </span>
                <div v-else>
                  <el-upload
                    action=""
                    list-type="picture-card"
                    :on-exceed="handleExceed"

                    :file-list="fileList"
                    :limit="2"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                    <img width="100%" :src="dialogImageUrl2" alt="">
                  </el-dialog>
                </div>

              </div>
              </el-col>
            </el-row>
          </div>

        </div>
        <el-row justify="center" align="middle">
          <el-col>
            <el-button v-if="!isVisible" type="primary" @click="isVisible=true">编辑</el-button>
            <el-button v-if="isVisible" type="danger" @click="edit">保存</el-button>
            <el-button v-if="isVisible" type="danger" @click="isVisible=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      listForm: [],
      isVisible: false,
      fileList: [
        { name: 'food.jpeg', url: 'https://img20.360buyimg.com/imgzone/jfs/t1/211198/26/12680/177425/61b6f0cbE006ea544/68379870de399b24.jpg' },
        { name: 'food.jpeg', url: 'https://img2.baidu.com/it/u=2833877028,2289005317&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' }
      ],
      dialogVisible: false,
      dialogImageUrl: 'https://img20.360buyimg.com/imgzone/jfs/t1/211198/26/12680/177425/61b6f0cbE006ea544/68379870de399b24.jpg',
      dialogImageUrl2: 'https://img2.baidu.com/it/u=2833877028,2289005317&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'

    }
  },
  created() {
    this.listForm = this.$route.params.myObject
  },
  methods: {

    drivingFn() {
      this.$message.error('演示系统 ! 不允许修改 !')
    },
    edit() {
      setTimeout(() => {
        this.$message.error('演示系统 ! 不允许修改!')
        this.isVisible = false
      }, 500)
      setTimeout(() => {
        this.$message.error('接口异常 ! 请联系后端老师!')
      }, 1500)
    },
    handleExceed(files, fileList) {
      this.$message.error('最多上传 2 张图片')
      setTimeout(() => {
        this.$message.error('演示系统! 不允许修改!')
      }, 3500)
    }
  }
}
</script>

<style scoped lang="scss">
.content{
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    height: 450px;
    .detail{
        margin: 20px 40px;
        line-height: 40px;
           .span-title {
          margin-right: 20px;
          }

    }
    .img-title{
      margin-top: 20px;
    }
}
</style>
